<script lang="ts">
import { Component, Inject, Vue, Watch } from 'vue-facing-decorator';
import { User, Lock } from '@element-plus/icons-vue'
import { login, reg } from '@/api/auth/auth';
import type { LoginFormData, UserInfo } from '@/api/auth/auth';
import { ElForm, ElMessage } from 'element-plus';

@Component({
  components: {
    ElIconUser: User,
    ElIconLock: Lock
  }
})
export default class LoginPage extends Vue {
  declare $refs: {
    authForm: InstanceType<typeof ElForm>;
  }
  mode: 'login' | 'reg' = 'login';
  authForm: LoginFormData & { password2: string } = {
    username: '',
    password: '',
    password2: '',
  }
  @Inject() updateLoginInfo!: () => Promise<void>;
  @Inject() userInfo: UserInfo | null | undefined;

  @Watch('userInfo', { immediate: true })
  onUserInfoChange() {
    if (this.userInfo != null) {
      this.$router.push('/');
    }
  }

  async submitLogin() {
    if (!await this.$refs.authForm.validate().then(() => true, () => false)) {
      return;
    }
    const resp = await login(this.authForm);
    if (resp.data) {
      await this.updateLoginInfo();
    } else {
      ElMessage({ type: 'error', message: '登录失败，请检查密码' })
    }
  }
  async submitReg() {
    if (!await this.$refs.authForm.validate().then(() => true, () => false)) {
      return;
    }
    const resp = await reg(this.authForm);
    if (resp.data) {
      this.submitLogin();
    } else {
      ElMessage({ type: 'error', message: resp.error || '注册失败，用户名已被使用' })
    }
  }
}
</script>
<template>
<div class="page-login">
  <el-card class="auth-form-card">
    <el-form class="auth-form" :model="authForm" ref="authForm">
      <el-form-item>
        <h2 v-if="mode === 'login'">登录</h2>
        <h2 v-if="mode === 'reg'">注册</h2>
      </el-form-item>
      <el-form-item prop="username" :rules="{ required: true, message: '请输入用户名' }">
        <el-input name="username" v-model="authForm.username" placeholder="用户名">
          <template #prefix>
            <el-icon><User /></el-icon>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item prop="password" :rules="{ required: true, message: '请输入密码' }">
        <el-input type="password" name="password" v-model="authForm.password" placeholder="密码">
          <template #prefix>
            <el-icon><Lock /></el-icon>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item v-if="mode === 'reg'" prop="password2" :rules="{ validator: () => authForm.password === authForm.password2, message: '两次输入的密码不一致' }">
        <el-input type="password" name="password2" v-model="authForm.password2" placeholder="确认密码">
          <template #prefix>
            <el-icon><Lock /></el-icon>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item v-if="mode === 'login'">
        <el-button type="primary" @click="submitLogin">登录</el-button>
      </el-form-item>
      <el-form-item v-if="mode === 'login'">
        <el-button @click="() => { mode = 'reg' }">没有账号？点击注册</el-button>
      </el-form-item>
      <el-form-item v-if="mode === 'reg'">
        <el-button type="primary" @click="submitReg">注册</el-button>
      </el-form-item>
      <el-form-item v-if="mode === 'reg'">
        <el-button @click="() => { mode = 'login' }">已有账号？点击登录</el-button>
      </el-form-item>
    </el-form>
  </el-card>
  <div class=info>
    <h1>加入小说分享社区</h1>
    <p>收藏阅读更方便</p>
    <p>创作分享更轻松</p>
  </div>
</div>
</template>
<style scoped>
.thin-mode .page-login {
  display: flex;
  flex-direction: column;
}
.wide-mode .page-login {
  display: flex;
  flex-direction: row-reverse;
  gap: 20px;
  max-width: 1000px;
  margin: 20px auto;
  align-items: center;
  justify-content: space-evenly;
  display: flow-root;
}
.wide-mode .auth-form-card {
  width: 400px;
}
.thin-mode .auth-form-card {
  width: 100%;
}
.info {
  overflow: hidden;
}
.thin-mode .info {
  padding: 20px;
}
.auth-form h2 {
  margin: 0;
  width: 100%;
  text-align: center;
}
.auth-form button {
  width: 100%;
}
</style>
